<template>
	<view class="nav-myTicket-content">
		<!-- 导航 tab -->
		<view class="tab-container">
			<view class="item-tab" :class="{'ac-item-tab':currentTab == item.id}" v-for="(item,index) in tabList" :key="item.id" @click="onTabBtn(item)">{{ item.title }}</view>
		</view>
		<!-- 列表 list -->
		<view class="list-container">
			<view class="no-data-container" v-if="tableData.length === 0">暂无门票预约记录</view>
			<view class="item-list" v-for="(item,index) in tableData" :key="item.id">
				<view class="title-container">
					<image class="titleIcon" src="../../static/imgs/myTicket.png" mode=""></image>
					<view class="title">华东植物园门票</view>
				</view>
				<view class="content-container">
					<view class="time">预约时间：{{ item.travelDate | formatTime }}</view>
					<view>预约人：{{ item.name }}</view>
					<!-- <view>预约总人数：{{ item.totlePeole }}人</view> -->
					<view>下单时间：{{ item.createTime }}</view>
				</view>
				<view class="botton-container"  v-if="currentTab == 1">
					<!-- <view class="btn-detail cancel-order" @click="cancelOrder(item,index)">取消预约</view> -->
					<view class="btn-detail" @click="navTo(item)">详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/server/getData.js'
	import * as utils from '@/utils/index.js'
	export default {
		filters:{
			formatTime(timeVal){
				return `${utils.moment.formatTime(timeVal,'YYYY-MM-DD')}(${utils.moment.formatTime(timeVal,'dddd').replace('星期','周')})`
			}
		},
		data(){
			return {
				// 0:待使用 1:已使用 -1:退款
				tabList:[
					{
						id:1,
						ext:0,
						title:'我的门票预约'
					}
					// {
					// 	id:1,
					// 	ext:0,
					// 	title:'待核销'
					// },
					// {
					// 	id:2,
					// 	ext:1,
					// 	title:'已核销'
					// },
					// {
					// 	id:3,
					// 	ext:-1,
					// 	title:'已取消'
					// }
				],
				currentTab:1,
				listQuery: {
					page: 1, // 当前的页码
					limit: 10, // 一页显示几条
					total: 0 // 总条数
				},
				tableData: [], // 数据列表
				isLoading: false,
				isCancelOrder:false
			}
		},
		onLoad(){
			this.init_load()
		},
		methods:{
			init_load(){
				this.get_lists()
			},
			async get_lists() {
				if (this.isLoading) return
				try {
					this.isLoading = true
					uni.showLoading({ title: '加载中' })
					const res = await api.order.list({
						size: this.listQuery.limit,
						page: this.listQuery.page,
						status: (this.tabList.find(item=>item.id == this.currentTab)).ext
					})
					this.tableData = this.tableData.concat(res.records)
					this.listQuery.total = Math.ceil(res.total / this.listQuery.limit)
					if (this.listQuery.page < this.listQuery.total) {
						this.isLoading = false
						this.listQuery.page = this.listQuery.page + 1
					} else {
						this.isLoading = true
					}
				} catch (e) {
					this.isLoading = false
				} finally {
					uni.hideLoading();
				}
			},
			clearDate(){
				this.isLoading = false
				this.tableData = []
				this.listQuery.page= 1
				this.listQuery.limit= 10
				this.listQuery.total= 0
			},
			onTabBtn(item){
				if(this.currentTab == item.id) return
				this.currentTab = item.id
				this.clearDate()
				this.get_lists()
			},
			navTo(item){
				uni.navigateTo({
					url:`/pages/ticket/index?ticketCode=${item.ticketCode}`
				})
			},
			cancelOrder(item,index){
				if(this.isCancelOrder) return
				try{
					this.isCancelOrder = true
					uni.showModal({
						title: '提示',
						content: `是否要取消此门票吗?`,
						success: async (res) => {
							if (res.confirm) {
								await api.order.remove({
									"id": item.parentId,
									"childOrderId": item.id
								})
								this.tableData.splice(index,1)
							}
						}
					})
				}catch(e){
					
				}finally{
					this.isCancelOrder = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.nav-myTicket-content{
		background-color: #f5f6fa;
		height: 100%;
		position: relative;
		.tab-container{
			display: flex;
			height: 88rpx;
			background-color: #FFF;
			.item-tab{
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #646566;
			}
			.ac-item-tab{
				color: #0b6cf9;
				font-weight: bold;
			}
		}
		.list-container{
			background-color: #f5f6fa;
			padding: 20rpx 20rpx 0 20rpx;
			.no-data-container{
				text-align: center;
				font-size: 26rpx;
				color: #666;
			}
			.item-list{
				background-color: #FFF;
				border-radius: 10rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 20rpx;
				.title-container{
					font-size: 0;
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #ececec;
					.titleIcon{
						width: 40rpx;
						height: 40rpx;
					}
					.title{
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						margin-left: 10rpx;
					}
				}
				.content-container{
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					font-size: 28rpx;
					color: #999;
					line-height: 1.573;
					border-bottom: 1px solid #ececec;
					.time{
						font-weight: 500;
						color: #333;
					}
				}
				.botton-container{
					display: flex;
					justify-content: flex-end;
					.btn-detail{
						width: 136rpx;
						height: 60rpx;
						color: #1989fa;
						border:1px solid #1989fa;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						border-radius: 6rpx;
						margin-top: 40rpx;
						margin-left: 40rpx;
					}
					.cancel-order{
						color: #f56c6c;
						border:1px solid #f56c6c;
					}
				}
			}
		}
	}
</style>